<template>
    <div class="wrapper">
          <header>
              <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
              <p>预约成功</p>
              <div></div>
          </header>
          <div class="top-ban"></div>
  
          <section>
              <div class="success">
                  <div class="icon-box">
                      <div class="icon">
                          <i class="fa fa-check"></i>
                      </div>
                  </div>
                  <h1>预约约成功！</h1>
                  <p>请体检用户携带本人身份证到店认证</p>
              </div>
              <div class="order-btn" @click="toAppointmentList">查看订单</div>
              <div class="continue" @click="toAppointment">继续为家人预约</div>
              <div class="info">
                  <p>您的信息已经发送至体检机构</p>
                  <p>预约成功后会发送短信至您的手机</p>
                  <p>客服电话<span>4008-XXX-XXX</span></p>
              </div>
          </section>
          
          <div class="bottom-ban"></div>
          <Footer></Footer>
      </div>
  </template>
  
  <script>
  import Footer from '@/components/Footer.vue';
  import { reactive, toRefs } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { setSessionStorage,getSessionStorage } from "../common.js";
  import axios from "axios";
  
  axios.defaults.baseURL = "http://localhost:8080/tijian/"
  
  export default {
  
     
  
      setup(){
  
          const router=useRouter();
  
          function toAppointmentList(){
              router.push("/appointmentList")
          }
  
          function toAppointment(){
              router.push("/appointment")
          }
  
          return{
              toAppointment,
              toAppointmentList
          }
  
  
      },
      
  
      components:{
          Footer,
          
      }
  
  }
  </script>
  
  <style scoped>
  /*********************** 总容器 ***********************/
  .wrapper{
      width: 100%;
      height: 100%;
      background-color: #F9F9F9;
  }
  
  /*********************** header ***********************/
  header{
      width: 100%;
      height: 15.7vw;
      background-color: #FFF;
  
      position: fixed;
      left: 0;
      top: 0;
  
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      box-sizing: border-box;
      padding: 0 3.6vw;
  }
  header .fa{
      font-size: 8vw;
  }
  
  
  
  /*********************** common样式 ***********************/
  .top-ban{
      width: 100%;
      height: 15.7vw;
  }
  .bottom-ban{
      width: 100%;
      height: 14.2vw;
  }
  
  /*********************** section ***********************/
  section{
      width: 100%;
  }
  section .success{
      width: 100%;
      height: 62vw;
      border-bottom: solid 1px #EEE;
      background-color: #FFF;
  }
  section .success .icon-box{
      width: 100%;
      height: 30vw;
      background-image: linear-gradient(135deg,#01C7A4,#02A6C9,#02A6C9);
      position: relative;
  }
  section .success .icon-box .icon{
      width: 16vw;
      height: 16vw;
      border-radius: 8vw;
      background-color: #FFF;
  
      position: absolute;
      left: 42vw;
      bottom: -8vw;
  
      font-size: 8vw;
      color: #02A6C9;
  
      text-align: center;
      line-height: 16vw;
  }
  section .success h1{
      text-align: center;
      font-size: 5.2vw;
      font-weight: 500;
      color: #02A6C9;
      margin-top: 10vw;
  }
  section .success p{
      text-align: center;
      font-size: 3.4vw;
      color: #555;
      margin-top: 3vw;
  }
  
  section .order-btn{
      width: 100%;
      height: 14vw;
      text-align: center;
      line-height: 14vw;
      font-size: 4vw;
      color: #02A6C9;
      background-color: #FFF;
      user-select: none;
      cursor: pointer;
  }
  section .continue{
      width: 88vw;
      height: 13vw;
      margin: 0 auto;
      background-image: linear-gradient(135deg,#01C7A4,#02A6C9,#02A6C9);
      border-radius: 1vw;
      text-align: center;
      line-height: 13vw;
      margin-top: 5vw;
      font-size: 4vw;
      color: #FFF;
      user-select: none;
      cursor: pointer;
  }
  section .info{
      width: 100%;
      margin-top: 16vw;
  }
  section .info p{
      text-align: center;
      font-size: 3.2vw;
      color: #999;
      margin-top: 1vw;
  }
  section .info p span{
      font-size: 3.6vw;
      color: #555;
      margin-left: 1vw;
  }
  
  
  </style>